<template>
	<view class="page-search-list">
		<view class="top">
			<search v-model="params.keyWord" @change="onSearchChange"></search>
			<!--  #ifndef  MP-WEIXIN -->
			<view class="page-search-list__type">
				<button
					:class="[
						{
							active: type == item.value
						}
					]"
					v-for="(item, index) in options.type"
					:key="index"
					@tap="changeType(item.value)"
				>
					{{ item.label }}
				</button>
			</view>
			<!--  #endif -->

			<view class="page-search-list__filter">
				<view class="order">
					<view class="block" v-for="(item, index) in filter.sort" :key="index">
						<sort
							:active="item.active"
							:index="index"
							:order="item.order"
							:title="item.title"
							@changeSort="changeSort"
						></sort>
					</view>
				</view>
				<view class="checkbox">
					<text @tap="changeCoupon">优惠券</text>
					<ui-checkbox v-model="isChecked" @change="refresh"></ui-checkbox>
				</view>
			</view>
		</view>

		<view class="page-search-list__det">
			<template v-if="type == 1">
				<view class="goods-wrap" v-for="(item, index) in list" :key="index"
					><tb-goods-item :item="item"></tb-goods-item
				></view>

				<!--商品骨架-->
				<view class="skeleton-wrap" v-if="list.length === 0 && !finished && !empty">
					<skeleton
						class="goods-skeleton"
						:loading="list.length === 0 && !finished && !empty"
						avatarShape="square"
						avatarSize="228rpx"
						v-for="i in ['a', 'b', 'c', 'd', 'e']"
						:key="i"
					></skeleton>
				</view>
				<load-more
					:finished="finished"
					:loading="loading"
					v-if="!empty"
				></load-more>

				<template v-if="finished || empty">
					<view class="super-search" v-if="superList.length > 0"
						><view class="super-search__title">全网商品</view></view
					>

					<view class="goods-wrap" v-for="(item, index) in superList" :key="`a${index}`"
						><tb-goods-item :item="item" type="superGoods"></tb-goods-item
					></view>
					<load-more
						:finished="superFinished"
						:empty="superEmpty"
						:loading="superLoading"
						emptyText="无搜索结果，换个词试试吧～"
					></load-more>
				</template>
			</template>

			<template v-if="type == 2">
				<view class="goods-wrap" v-for="(item, index) in list" :key="index"
					><jd-goods-item :item="item"></jd-goods-item
				></view>

				<!--商品骨架-->
				<view class="skeleton-wrap" v-if="list.length === 0 && !finished && !empty">
					<skeleton
						class="goods-skeleton"
						:loading="list.length === 0 && !finished && !empty"
						avatarShape="square"
						avatarSize="228rpx"
						v-for="i in ['h', 'i', 'j', 'k', 'l']"
						:key="i"
					></skeleton>
				</view>
				
				<load-more
					:finished="finished"
					:loading="loading"
					v-if="!empty"
				></load-more>

				<template v-if="finished || empty">
					<view class="super-search" v-if="superList.length > 0"
						><view class="super-search__title">全网商品</view></view
					>
					<view class="goods-wrap" v-for="(item, index) in superList" :key="`b${index}`"
						><jd-goods-item :item="item" type="superGoods"></jd-goods-item
					></view>
					<load-more
						:finished="superFinished"
						:empty="superEmpty"
						:loading="superLoading"
						emptyText="无搜索结果，换个词试试吧～"
					></load-more>
				</template>
			</template>
			
			<template v-if="type == 3">
				<view class="goods-wrap" v-for="(item, index) in list" :key="index"
					><pdd-goods-item :item="item"></pdd-goods-item
				></view>

				<!--商品骨架-->
				<view class="skeleton-wrap" v-if="list.length === 0 && !finished && !empty">
					<skeleton
						class="goods-skeleton"
						:loading="list.length === 0 && !finished && !empty"
						avatarShape="square"
						avatarSize="228rpx"
						v-for="i in ['h', 'i', 'j', 'k', 'l']"
						:key="i"
					></skeleton>
				</view>
				
				<load-more
					:finished="finished"
					:loading="loading"
					v-if="!empty"
				></load-more>

				<template v-if="finished || empty">
					<view class="super-search" v-if="superList.length > 0"
						><view class="super-search__title">全网商品</view></view
					>
					<view class="goods-wrap" v-for="(item, index) in superList" :key="`b${index}`"
						><pdd-goods-item :item="item" type="superGoods"></pdd-goods-item
					></view>
					<load-more
						:finished="superFinished"
						:empty="superEmpty"
						:loading="superLoading"
						emptyText="无搜索结果，换个词试试吧～"
					></load-more>
				</template>
			</template>
		</view>

		<!--回到顶部-->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop"
			><text class="iconfont icon-huidaodingbu"></text
		></view>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
import Search from '@/components/jd/searchInput';
import Sort from '@/components/Sort';
import TbGoodsItem from '@/components/GoodsItem';
import JdGoodsItem from '@/components/jd/GoodsItem';
import PddGoodsItem from '@/components/pdd/GoodsItem';
import LoadMore from '@/components/LoadMore';
import Skeleton from '@/components/uni/Skeleton';
import { mapGetters } from 'vuex';

export default {
	components: {
		Search,
		Sort,
		LoadMore,
		TbGoodsItem,
		JdGoodsItem,
		PddGoodsItem,
		Skeleton
	},

	data() {
		return {
			type: 1,
			isChecked: true,
			params: {
				page: 1,
				size: 20,
				order: '',
				sort: 'desc',
				hasCoupon: true,
				keyWord: ''
			},
			superParams: {
				page: 1,
				size: 20,
				order: '',
				sort: 'desc',
				hasCoupon: true,
				keyWord: ''
			},
			filter: {
				sort: [
					{
						title: '综合',
						active: true,
						order: 'desc'
					},
					{
						title: '销量',
						active: false,
						order: ''
					},
					{
						title: '价格',
						active: false,
						order: ''
					}
				]
			},
			options: {
				type: [
					{
						label: '淘宝',
						value: 1
					},
					{
						label: '京东',
						value: 2
					},
					{
						label: '拼多多',
						value: 3
					}
				]
			},
			list: [],
			superList: [],
			isRefresh: false, // 控制是否刷新
			loading: false, // 控制loading显示
			finished: false, // 控制是否加载更多商品
			empty: false, // 控制是否为空数据
			superLoading: false, // 控制loading显示
			superFinished: false, // 控制是否加载更多商品
			superEmpty: false, // 控制是否为空数据
			isShowScrollTop: false
		};
	},
	
	computed: {
		...mapGetters(['permInfo'])
	},

	onLoad(options) {
		const { keyWord, cid, type } = options;

		this.params.cid = cid || null;
		this.superParams.cid = cid || null;
		this.params.keyWord = keyWord || '';
		this.superParams.keyWord = keyWord || '';
		this.type = type || 1;

		this.loadMore();
		
		// 自定义统计上报
		let channel;
		if (plus.runtime.channel === 'yyb') {
			channel = '应用宝'
		} else if (plus.runtime.channel === 'vivo') {
			channel = 'vivo应用市场'
		} else if (plus.runtime.channel === 'oppo') {
			channel = 'oppo应用市场'
		} else if (plus.runtime.channel === 'xiaomi') {
			channel = '小米商店'
		} else if (plus.runtime.channel === 'huawei') {
			channel = '华为商店'
		} else {
			channel = '默认渠道'
		}
		let goodsType
		if (this.type === 1) {
			goodsType = '淘宝'
		} else if (this.type === 2) {
			goodsType = '京东'
		} else if (this.type === 3) {
			goodsType = '拼多多'
		}
		uni.report(
			'title',
			'搜索商品：' +
			keyWord +
			'商品类型：' + 
			goodsType +
			'-来源：' + channel
		);
	},

	onShow() {
		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
	},

	onHide() {
		this.$refs.aiSearch.close();
	},

	onPageScroll(e) {
		if (e.scrollTop > 340) {
			this.isShowScrollTop = true;
		} else {
			this.isShowScrollTop = false;
		}
	},

	// 上拉加载
	onReachBottom() {
		if (!this.empty && !this.finished) {
			this.loadMore();
		} else if (!this.superEmpty && !this.superFinished) {
			this.superLoadMore();
		}
	},

	// 下拉刷新
	onPullDownRefresh() {
		this.refresh('refresh');
	},

	methods: {
		onSearchChange(val) {
			this.params.keyWord = val;
			this.superParams.keyWord = val;
			this.refresh();
			
			// 自定义统计上报
			let channel;
			if (plus.runtime.channel === 'yyb') {
				channel = '应用宝'
			} else if (plus.runtime.channel === 'vivo') {
				channel = 'vivo应用市场'
			} else if (plus.runtime.channel === 'oppo') {
				channel = 'oppo应用市场'
			} else if (plus.runtime.channel === 'xiaomi') {
				channel = '小米商店'
			} else if (plus.runtime.channel === 'huawei') {
				channel = '华为商店'
			} else {
				channel = '默认渠道'
			}
			let goodsType
			if (this.type === 1) {
				goodsType = '淘宝'
			} else if (this.type === 2) {
				goodsType = '京东'
			} else if (this.type === 3) {
				goodsType = '拼多多'
			}
			uni.report(
				'title',
				'搜索商品变更：' +
				val +
				'商品类型：' + 
				goodsType +
				'-来源：' + channel
			);
		},

		changeType(type) {
			this.type = type;
			this.refresh();
		},

		changeCoupon() {
			this.isChecked = !this.isChecked;
			this.refresh();
		},

		changeSort(index, order) {
			this.filter.sort.forEach(item => {
				item.active = false;
				item.order = '';
			});
			this.filter.sort[index].order = order;
			this.filter.sort[index].active = true;

			this.params.sort = order;
			this.superParams.sort = order;

			switch (index) {
				case 0:
					this.params.order = '';
					this.superParams.order = '';
					break;
				case 1:
					this.params.order = 'sale';
					this.superParams.order = 'sale';
					break;
				case 2:
					this.params.order = 'endPrice';
					this.superParams.order = 'endPrice';
					break;
				default:
					this.params.order = '';
					this.superParams.order = '';
			}
			if (!order) {
				this.params.order = '';
				this.superParams.order = '';
			}

			this.params.page = 1;
			this.refresh();
		},

		refresh(operate) {
			this.list = [];
			this.params.page = 1;
			this.loading = true;
			this.finished = false;
			this.empty = false;

			this.superList = [];
			this.superParams.page = 1;
			this.superLoading = true;
			this.superFinished = false;
			this.superEmpty = false;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			this.loadMore(operate);
		},

		loadMore(operate) {
			this.params.hasCoupon = this.isChecked ? 1 : 0;
			uni.setStorageSync('keyWord', this.params.keyWord);

			let p = null;
			uni.stopPullDownRefresh();
			if (!this.empty && !this.finished) {
				// 普通搜
				this.loading = true;
				if (this.type == 1) {
					p = this.$service.shopping.goods.page(this.params, { isLoading: true });
				} else if (this.type == 2) {
					p = this.$service.jingdong.goods.page(this.params, { isLoading: true });
				} else if (this.type == 3) {
					p = this.$service.pdd.goods.page(this.params, { isLoading: true });
				}

				p.then(res => {
					// 上架过程增加vip会员商品过滤
					let isShelf = false;
					if (this.permInfo.common && this.permInfo.common.length > 0) {
						this.permInfo.common.forEach(item => {
							if (item.name === 'isShelf' && item.status === 1) {
								isShelf = true;
							}
						});
					}
					if (!isShelf) {
						let reg1 = RegExp(/腾讯视频/);
						let reg2 = RegExp(/会员/);
						let reg3 = RegExp(/年卡/);
						let reg4 = RegExp(/爱奇艺/);
						let reg5 = RegExp(/视频/);
						let reg6 = RegExp(/vip/);
						let reg7 = RegExp(/VIP/);
						let reg8 = RegExp(/芒果/);
						let reg9 = RegExp(/优酷/);
						let reg10 = RegExp(/搜狐/);
						res.list = res.list.filter(item => {
							if (this.type === 1) {
								if (item.title.match(reg1) ||
									item.title.match(reg2) ||
									item.title.match(reg3) ||
									item.title.match(reg4) ||
									item.title.match(reg5) ||
									item.title.match(reg6) ||
									item.title.match(reg7) ||
									item.title.match(reg8) ||
									item.title.match(reg9) ||
									item.title.match(reg10)) {
									return false;
								} else {
									return true;
								}
							} else if (this.type === 2) {
								if (item.skuName.match(reg1) ||
									item.skuName.match(reg2) ||
									item.skuName.match(reg3) ||
									item.skuName.match(reg4) ||
									item.skuName.match(reg5) ||
									item.skuName.match(reg6) ||
									item.skuName.match(reg7) ||
									item.skuName.match(reg8) ||
									item.skuName.match(reg9) ||
									item.skuName.match(reg10)) {
									return false;
								} else {
									return true;
								}
							} else if (this.type === 3) {
								if (item.goodsName.match(reg1) || 
									item.goodsName.match(reg2) ||
									item.goodsName.match(reg3) ||
									item.goodsName.match(reg4) ||
									item.goodsName.match(reg5) ||
									item.goodsName.match(reg6) ||
									item.goodsName.match(reg7) ||
									item.goodsName.match(reg8) ||
									item.goodsName.match(reg9) ||
									item.goodsName.match(reg10)) {
									return false;
								} else {
									return true;
								}
							}
						})
					}
					
					this.list = this.list.concat(res.list || []);
					
					// 加载状态结束
					this.loading = false;
					this.params.page += 1;

					// 刷新列表
					if (operate === 'refresh') {
						uni.showToast({
							title: '刷新成功',
							icon: 'none'
						});
						uni.stopPullDownRefresh();
						this.isRefresh = false;
					}

					// 数据全部加载完成
					if (this.list.length === 0) {
						this.params.page = 1;
						this.empty = true;
						this.superLoadMore();
					} else if (this.list.length >= res.pagination.total) {
						this.finished = true;
						this.superLoadMore();
					}
				});
			}
		},

		// 超级搜
		superLoadMore(operate) {
			this.superParams.hasCoupon = this.isChecked ? 1 : 0;

			let p = null;
			this.superLoading = true;

			// 超级搜
			if (this.type == 1) {
				p = this.$service.shopping.goods.superGoods(this.superParams);
			} else if (this.type == 2) {
				p = this.$service.jingdong.goods.superGoods(this.superParams);
			} else if (this.type == 3) {
				p = this.$service.pdd.goods.superGoods(this.superParams);
			}

			p.then(res => {
				// 增加vip会员商品过滤
				let isShelf = false;
				if (this.permInfo.common && this.permInfo.common.length > 0) {
					this.permInfo.common.forEach(item => {
						if (item.name === 'isShelf' && item.status === 1) {
							isShelf = true;
						}
					});
				}
				if (!isShelf) {
					let reg1 = RegExp(/腾讯视频/);
					let reg2 = RegExp(/会员/);
					let reg3 = RegExp(/年卡/);
					let reg4 = RegExp(/爱奇艺/);
					let reg5 = RegExp(/视频/);
					let reg6 = RegExp(/vip/);
					let reg7 = RegExp(/VIP/);
					let reg8 = RegExp(/芒果/);
					let reg9 = RegExp(/优酷/);
					let reg10 = RegExp(/搜狐/);
					res.list = res.list.filter(item => {
						if (this.type === 1) {
							if (item.title.match(reg1) ||
								item.title.match(reg2) ||
								item.title.match(reg3) ||
								item.title.match(reg4) ||
								item.title.match(reg5) ||
								item.title.match(reg6) ||
								item.title.match(reg7) ||
								item.title.match(reg8) ||
								item.title.match(reg9) ||
								item.title.match(reg10)) {
								return false;
							} else {
								return true;
							}
						} else if (this.type === 2) {
							if (item.skuName.match(reg1) ||
								item.skuName.match(reg2) ||
								item.skuName.match(reg3) ||
								item.skuName.match(reg4) ||
								item.skuName.match(reg5) ||
								item.skuName.match(reg6) ||
								item.skuName.match(reg7) ||
								item.skuName.match(reg8) ||
								item.skuName.match(reg9) ||
								item.skuName.match(reg10)) {
								return false;
							} else {
								return true;
							}
						} else if (this.type === 3) {
							if (item.goodsName.match(reg1) || 
								item.goodsName.match(reg2) ||
								item.goodsName.match(reg3) ||
								item.goodsName.match(reg4) ||
								item.goodsName.match(reg5) ||
								item.goodsName.match(reg6) ||
								item.goodsName.match(reg7) ||
								item.goodsName.match(reg8) ||
								item.goodsName.match(reg9) ||
								item.goodsName.match(reg10)) {
								return false;
							} else {
								return true;
							}
						}
					})
				}
				
				this.superList = this.superList.concat(res.list || []);

				// 加载状态结束
				this.superLoading = false;
				this.superParams.page += 1;

				// 数据全部加载完成
				if (this.superList.length === 0) {
					this.superParams.page = 1;
					this.superEmpty = true;
				} else if (this.superList.length >= res.pagination.total) {
					this.superFinished = true;
				}
			});
		},

		// 回到顶部
		backTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-search-list {
	background-color: #fff;
	min-height: 100vh;
	.back-index {
		width: 80rpx;
		height: 80rpx;
		background: #ffffff;
		border-radius: 50%;
		position: fixed;
		right: 32rpx;
		bottom: 138rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #ebeae7;
	}
	.top {
		position: sticky;
		top: 0;
		z-index: 9;
		background-color: #fff;
		border-bottom: 5rpx solid #f5f5f5;
	}
	.page-search-list__det {
		width: 722rpx;
		margin: auto;
	}

	&__filter {
		display: flex;
		align-items: center;
		height: 80rpx;

		.order {
			display: flex;
			flex: 1;

			.block {
				flex: 1;
			}
		}

		.checkbox {
			display: flex;
			align-items: center;
			width: 190rpx;
			font-size: 26rpx;
			border-left: 1rpx solid #eee;
			padding-left: 20rpx;
			margin-left: -40rpx;
			text {
				margin-right: 10rpx;
			}
		}
	}

	&__type {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 70%;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		button {
			background-color: #fff;
			font-size: 28rpx;
			border-radius: 0;
			padding-bottom: 10rpx;
			letter-spacing: 6rpx;
			font-weight: bold;
			width: 120rpx;
			border-bottom: 4rpx solid #fff;
			transition: 0.5s;

			&::after {
				border: 0;
			}

			&.active {
				border-bottom: 4rpx solid $main-color;
			}
		}
	}

	.super-search {
		&__title {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			margin-top: 20rpx;
		}
	}

	.goods-wrap {
		padding: 20rpx 30rpx;
		border-bottom: 2rpx dashed #e2e2e2;
	}
}
.skeleton-wrap {
	padding: 20rpx 30rpx;
	background: #fff;
}
</style>
